<template>
  <a-modal width="1015px" :visible="SAVisible" cancelText="关闭" @cancel="SAVisiblehandleCancel">
  

    <div v-if="SABoxShow">
      <div class="SA-box">
        <a-row class="SA-box">
          <a-col :span="6"> 顾客姓名：{{ searchUserinfo.name }} </a-col>
          <a-col :span="6"> 顾客卡号：{{ searchUserinfo.cardNo }} </a-col>

          <a-col :span="6"> 顾客年龄：{{ searchUserinfo.age?searchUserinfo.age + '岁':'未知' }} </a-col>
          <a-col :span="6"> 顾客性别：{{ searchUserinfo.sex === 0 ? '男' : '女' }} </a-col>
   
        </a-row>
        <a-row class="SA-box"> 
          <a-col :span="6"> 所属客管：{{ searchUserinfo.consultManName }} </a-col>
          <a-col :md="6"> 开单客管：{{ searchUserinfo.developerName }} </a-col> 
          <a-col :md="12" style="display:flex"> <span style="width：70px;display:bloc">联系方式：</span><span style="width:calc(100% - 70px);display:block">{{ searchUserinfo.tel }}</span></a-col>
        </a-row>
         
        
        <a-row class="SA-box">
          <a-col :md="6"> 预约专家：{{ `${getDepName(searchUserinfo.createdUserDeptId)}-${searchUserinfo.experName}` }} </a-col>
          <a-col :md="6"> 其他专家：{{ `${getDepName(searchUserinfo.otherPersonDeptId)}-${searchUserinfo.otherPersonName ? searchUserinfo.otherPersonName: ''}` }} </a-col>
          <a-col :md="6"> 医生助理：{{ `${getDepName(searchUserinfo.assistantDeptId)}-${searchUserinfo.assistantName ? searchUserinfo.assistantName :''}` }} </a-col> 
          <a-col :md="6"> 配台护士：{{ `${getDepName(searchUserinfo.nuresDeptId)}-${searchUserinfo.nurseName ? searchUserinfo.nurseName : ''}` }} </a-col> 
        </a-row>
        <a-row class="SA-box">
          <a-col :md="6"> 美容仪器：{{ searchUserinfo.devices ? searchUserinfo.devices : '-' }} </a-col>
          <a-col :md="6"> 咨询类型：{{ searchUserinfo.consultTypeName == '1'?'初诊':(searchUserinfo.consultTypeName == '2'?'复诊':'再消费') }} </a-col>
          <a-col :md="6"> 麻醉类型：{{ searchUserinfo.consultTypeName == '1'?'局麻':(searchUserinfo.consultTypeName == '2'?'全麻':'表麻') }} </a-col>
          <a-col :md="6"> 检查结果：{{ searchUserinfo.consultTypeName == '1'?'已检':'未检' }} </a-col>
        </a-row>
        <a-row class="SA-box">
          <a-col :md="6"> 预约日期：{{ searchUserinfo.schDate }} </a-col>
          <a-col :md="6"> 预约时间：{{ moment(searchUserinfo.beginTime).format('HH:mm')+'~'+moment(searchUserinfo.endTime).format('HH:mm') }} </a-col>
          <a-col :md="6"> 预计时长：{{ new Date(Number(new Date(moment(searchUserinfo.endTime).format('YYYY-MM-DD HH:mm:ss')).getTime()) - Number(new Date(moment(searchUserinfo.beginTime).format('YYYY-MM-DD HH:mm:ss')).getTime())) / (1000 * 60) }} 分钟 </a-col>
          <a-col :md="6"> 检查结果：{{ searchUserinfo.consultTypeName == '1'?'已检':'未检' }} </a-col>
        </a-row>
        <a-row class="SA-box"> 
          <a-col :md="6"> 费用情况：{{ searchUserinfo.consultTypeName == '1'?'已交':'未交' }} </a-col>
          <a-col :md="15"> 备注：{{ searchUserinfo.memo ? searchUserinfo.memo : '-' }} </a-col>
        </a-row>
      </div>
      

      <!-- 项目表格 -->
      <div style="margin-top: 50px" >
        <a-table
          :columns="innerColumns"
          :data-source="itemList"
          :rowKey="(record, index) => index"
          :pagination="false"
          :bordered="false" 
          :loading="tableLoading" 
        > 
        </a-table>
      </div>
    </div>

    

    <template slot="footer">
      <a-button type="primary" @click="SAVisiblehandleCancel()">关闭</a-button> 
    </template>
  </a-modal>
</template>
<script>
import {   
  SelectOperationScheduler, 
} from '@/api/modular/main/bookingManagement/bookingManagement'
import moment from 'moment'
export default {
  props: {
    row_record: {
      type: Object,
      default: () => {
        {
        }
      },
    },
  },
  data() {
    return {
      // 手术预约
      SAVisible: false,
      SABoxShow: false,    

      searchUserinfo: {},  

      // 项目表格
      pagination: {
        pageNum: 1,
        pageSize: 20,
        current: 1,
        total: 20,
      },
      itemList: [],
      tableLoading: false,
      innerColumns: [
        {
          title: '项目名称',
          align: 'center',
          dataIndex: 'name', 
          width: 220,
          ellipsis: true,
        },
        { title: '总次数', align: 'center', dataIndex: 'qty', width: 120, ellipsis: true },
        { title: '已做次数', align: 'center', dataIndex: 'rqty', width: 120, ellipsis: true },
        { title: '剩余次数', align: 'center', dataIndex: 'residueQty', width: 120, ellipsis: true },
        { 
          title: '本次预约次数', 
          align: 'center', 
          dataIndex: 'tqty', 
          width: 120,  
          scopedSlots: { customRender: 'tqty' },
        },
        { title: '耗材名称', align: 'center', dataIndex: 'consumableName', width: 120, scopedSlots: { customRender: 'consumableName' }, },
        {
          title: '耗材数量',
          align: 'center', 
          dataIndex: 'numberConsumable',
          width: 120,
          scopedSlots: { customRender: 'numberConsumable' },
        },
      ],
     
    }
  },
  methods: {
    getDepName(id){
      if(id == 'DE0011'){
        return '整形中心'
      }else if(id == 'DE0012'){
        return '皮肤中心'
      }else if(id == 'DE0013'){
        return '无创中心'
      }else if(id == 'DE0014'){
        return '口腔中心'
      }
      return ''
    }, 
   
    moment,
   
    SAVisiblehandleCancel() {
      this.SAVisible = false  
      setTimeout(() => {
        this.SABoxShow = false
        
      }, 500)
    },
    show() { 
      this.SAVisible = true 
    
        this.SABoxShow = true
        this.tableLoading = true

        console.log(this.row_record)
        // 修改的时候调用请求
        let sendData = {
          id: this.row_record.tbSchedulerId,
        }
        SelectOperationScheduler(sendData).then((res) => {
          if (res.code == 200) {
            let data = res.rows[0]
            this.searchUserinfo = data 
            
            this.$nextTick(() => { 
              setTimeout(() => {
                this.tableLoading = false
                 

                let newData = data.detailList.map(item => {
                  return {
                    name: item.treatmentName,
                    qty: item.qty,
                    rqty: item.rqty,
                    residueQty: item.residueQty,
                    tqty: Number(item.treatmentTimes),
                    consumableName: item.productNames?item.productNames:'暂无',
                    numberConsumable: item.productDoses?item.productDoses:0,
                    tbSchedulerReportId: item.reportId
                  }
                })
                 
                this.itemList = [...newData]
                
              },1000)
            })
           
          } else {
            this.$message.error(result.msg)
          }
        })
    
      
      
    },
   
     
  },
}
</script>
<style lang="less" scoped>
.SA-box {
  margin: 20px 0;
  .select-style-SA {
    height: 40px;
  }
}
/deep/.SA-model-style .ant-modal-wrap {
  top: 20vh !important;
}
/deep/ .no-user-input-style {
  input {
    border-color: red !important;
  }
}
.no-user-style {
  text-align: left;
  color: red;
  position: absolute;
  top: 29px;
  margin: 0 auto;
  left: 8%;
  background-color: #fff;
  width: 235px;
  z-index: 10;
  pointer-events: none;
}
/deep/ .text-area-style {
  width: 100%;
  .ant-form-item-control-wrapper {
    width: 75% !important;
  }
}
/deep/ .has-error .ant-form-explain,
.has-error .ant-form-split {
  color: #f5222d;
  position: absolute;
  top: 12px;
  left: 13px;
  background-color: #fff;
  width: 150px;
  pointer-events: none;
}

/deep/ .ant-calendar-time-picker-btn {
  display: none !important;
}
/deep/ .ant-form-inline .ant-form-item > .ant-form-item-label {
  width: 80px !important;
}
/deep/ .ant-form-inline .ant-form-item > .ant-form-item-control-wrapper {
  width: calc(100% - 80px) !important;
}
/deep/ .input-style {
  .ant-input-affix-wrapper .ant-input:not(:last-child) {
    padding-right: 46px !important;
  }
}
/deep/ .colorBorder {
  border-color: red !important;
}
 
/deep/ .ant-table-thead > tr > th{
  padding: 10px 16px !important;
} 
/deep/ .ant-table-tbody > tr > td{
  padding: 8px 16px !important;
}

// 选中高亮
/deep/ .rowcolor,
/deep/ .rowcolor:hover,
/deep/ .rowcolor>td:hover,
/deep/ .rowcolor>td{
  background-color: #4e84a3 !important;
  color: #fff !important;
}
/deep/ .descript-confrim-style{
  /deep/ .ant-modal{
    width: 800px !important;
  }
}

 
</style>